<extend name="./public/frame.html"/>
<block name="content">
    <table class="layui-table" id="wind" lay-filter="wind"></table>
    <script type="text/html" id="useTpl">
        <input type="checkbox" name="status" data-id="{{d.id}}" value="{{d.status}}" data-must="{{d.is_must}}"
               lay-skin="switch" lay-text="开启|关闭" lay-filter="status" {{ d.status == 1 ? 'checked' : '' }}>
    </script>
    <script type="text/html" id="isMust">
        {{#if(d.is_must == 1){}}<span style="color: red">必须</span>
        {{#}else{}}非必须
        {{#}}}
    </script>
    <script>
        layui.use(['table','laytpl','laydate','form'], function () {
            var table = layui.table
                , form = layui.form
                ,laydate = layui.laydate;
            lay('.date').each(function(){
                laydate.render({
                    elem: this
                    ,trigger: 'click'
                    ,type: 'datetime'
                });
            });
            var tableIns = table.render({
                elem:"#wind",
                url:"{$url}",
                cols: [[
                    {checkbox:true,title:"",fixed: true},
                    {title:"ID", field:'id', width:80,  sort: true},
                    {title:"分控规则", field:'content', width:500},
                    {title:"是否必须", field:'is_must', width:90, templet: '#isMust'},
                    {title:"开启/关闭", field:'status', width:100, templet: '#useTpl',align:'center'},
                ]],
                page:true,
                limit:10,
                done: function(res, curr, count){
                    _cur_page = curr;
                    _cur_limit = res['limit'];
                    _count = count;
                }
            });
            //监听开启/关闭操作
            form.on('switch(status)', function(obj){
                var check = obj.elem;
                var ori = obj.elem.checked == true ? false : true;//在没有操作前加载的复选框属性值
                var value = obj.value;
                var id = $(obj.elem).data('id');
                //var is_must = $(obj.elem).data('must');

                var tip = ori == true ? '确定关闭么?' : '确定开启么?';
                layer.confirm(tip, {icon: 3, title: '提示'},
                    function (index) {
                        var url = "{:url('cancel')}";
                        var div = obj.othis.parent('div');
                        $.post(url, {'id': id, 'status':value}, function (res) {
                            switch (res['status']){
                                case 1:
                                    var val = value==1?2:1;
                                    $(check).prop('checked',obj.elem.checked).val(val);
                                    div.html(check);
                                    form.render('checkbox');
                                    break;
                                case 2:
                                    table_r(tableIns);
                                    break;
                                default:
                                    layer.alert(res['msg'],{icon: 5});
                                    $(check).prop('checked', ori);
                                    form.render();
                                    break;
                            }
                        }, 'json');
                        layer.close(index);
                    },
                    function (index) {
                        $(check).prop('checked', ori);
                        form.render();
                        layer.close(index);
                    });
            });


            $('.layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });
    </script>
</block>